<template>
	<view class="pad-30">
		<view class="bg_color_fff betweenX pad-30 radius10">
			<view>答题卡</view>
		</view>

		<view class="bg_color_fff mar-top-30 pad-30 pad-top-100 swiper">
			<view class="index"> <text class="color-main">{{current +1}}</text> / {{answerList.length}}</view>
			<view class="type" v-if="questionType == 1">单选题</view>
			<view class="type" v-if="questionType == 2">多选题</view>
			<view class="type" v-if="questionType == 3">判断题</view>
			<swiper :current="current" :style="{height: swiperHeight + 'px'}" class="swiper" @change="changeSwiper">
				<swiper-item class="swiper-box" v-for="(item, index) in answerList" :key="index">
					<view class="etmHights">
						<view class="title">{{item.stem}}</view>
						<view>
							<view v-for="(info,inx) in item.option" :class="item.select.includes(inx)  ? 'select': ''"
								class="swiper-item" @tap="hanldeChoice(item,inx)">
								{{info}}
							</view>
						</view>

						<view class="button-box mar-left-10 mar-right-10">
							<!-- 未答题 -->
							<template v-if="item.res == '' || item.res == undefined">
								<up-button v-if="answerList.length == index+1" @click="hanldeSubQuestion(item,index)"
									type="primary " class="mar-top-20" text="提交考题"></up-button>
								<up-button v-else @click="hanldeSubQuestion(item,index)" type="primary "
									class="mar-top-20" text="确定"></up-button>
							</template>
							<!-- 已答题 -->
							<template v-else>
								<up-button v-if="answerList.length != index+1" @click="hanldeNext" type="success"
									class="mar-top-20" text="下一题"></up-button>
							</template>
						</view>

						<!-- 正确答案 -->
						<view class="da-bg" v-if="item.res">
							<view>
								正确答案：<text class="css">[{{item.answer}}]</text> 您选了 <text
									class="orr">[{{item.res.answer}}]</text>
							</view>
							<view class="flex mar-top-30">
								答题解析： <text v-html="item.analysis"></text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		watch
	} from 'vue';

	// 接口引入
	import {
		errorTestList,
		correction
	} from '/config/api.js';

	import {
		onLoad,
	} from '@dcloudio/uni-app';

	import {
		toast
	} from '@/uni_modules/uview-plus'

	const instance = getCurrentInstance();
	// 轮播index
	const current = ref(0);

	// 使用 reactive 创建响应式数组  
	const answerList = ref([]);
	const questionType = ref(1);
	let timeText = ref('')
	let dataInfo = '';
	// 获取详情
	const getInfoData = () => {
		errorTestList({
			test_id: infoId.value,
		}).then(res => {

			dataInfo = res.data;

			// 判断做到拿到题了
			answerList.value = res.data.map(item => {
				// 判断是做过这个题
				if (item.res == '' || item.res == undefined) {
					item.select = [];
				} else {
					let arrText = item.res.answer.split(',');
					item.select = stringToNumber(arrText)
				}
				return item;
			});

			questionType.value = res.data[0].question_type;
		})
	}




	// 轮播dom
	const boxRef = ref(null);
	// 轮播切换监听
	const changeSwiper = (e) => {
		let index = e.detail.current;
		current.value = index;
		questionType.value = answerList.value[index].question_type;
		getItemHeight()
	}

	// 窗口高度
	const windowHeight = ref()
	// 动态设置高度
	const swiperHeight = ref(800)

	// 获取元素高度
	function getItemHeight() {
		let query = uni.createSelectorQuery().in(instance);
		query.select(".etmHights").boundingClientRect(data => {

			// 如果 窗口高度 - （顶部距离 + 底部距离 ）小于 100 则 元素本身高度 + 100
			if (windowHeight.value - (data.top + data.bottom) < 100) {
				swiperHeight.value = data.height + 100;
			}

			// 如果 窗口高度 - （顶部距离 + 底部距离 ）大于 100 则 元素本身高度 加 剩余高度
			if (windowHeight.value - (data.top + data.bottom) > 100) {
				swiperHeight.value = data.height + (windowHeight.value -
					(data.top + data.bottom))
			}
		}).exec();
	}

	// 开始选择
	const hanldeChoice = (item, inx) => {

		// 已经做过当前题了
		if (item.res) {
			return
		};

		switch (item.question_type) {
			case 1:
			case 3: // 单选 & 判断
				if (!item.select.includes(inx)) {
					item.select[0] = inx;
				} else {
					item.select[0] = [];
				}
				break;
			case 2: // 多选
				if (!item.select.includes(inx)) {
					item.select.push(inx);
				} else {
					// 找到同样的移出
					let index = item.select.indexOf(inx);
					item.select.splice(index, 1);
				}
				break;
		}
	}

	// 提交当前做的题
	const hanldeSubQuestion = (item, index) => {

		// 未做出选项
		if (item.select.length == 0) {
			toast('已经是最后一题了')
			return
		}

		// 判断这道题的正确性
		let status = 100;
		if (item.answer === numbersToLetters(item.select).join(',')) {
			status = 200;
		} else {
			status = 100;
			item.res = {
				answer: numbersToLetters(item.select).join(',')
			}
			return;
		}

		let data = {
			questions_id: item.id,
			status: status,
			answer: numbersToLetters(item.select).join(','),
		}
		
		correction(data).then(res => {
			item.res = {
				answer: numbersToLetters(item.select).join(',')
			};
		})
	}

	// 下一题
	const hanldeNext = () => {
		if (answerList.value.length == current.value + 1) {
			toast('已经是最后一题了')
			return
		}
		current.value = ++current.value;
	}

	// ABC 转 数字
	const stringToNumber = (str) => {
		return str.map(letter => {
			return (parseInt(letter, 36) - 10)
		});
	}

	// 123 转 ABC
	const numbersToLetters = (numbers) => {
		return numbers.map(function(n) {
			return String.fromCharCode(n + 65);
		});
	}


	const infoId = ref('');
	// 页面加载中
	onLoad((param) => {
		infoId.value = param.id;
		getInfoData();
	})

	// vue 加载完成
	onMounted(async () => {
		uni.getSystemInfo({
			success(res) {
				windowHeight.value = res.windowHeight
			},
		})

		setTimeout(() => {
			getItemHeight()
		}, 800);
	})
</script>

<style scoped lang="scss">
	page {
		background: #f5f5f5;
	}

	.time {
		color: #ff6b00;
	}

	.swiper {
		position: relative;

		.index {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
	}

	.swiper-item {
		background-color: #f9f9f9;
		margin-top: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		height: 100%;
	}

	.swiper-box {
		height: 100%;
	}

	.type {
		width: 140rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #2c8eff;
		position: absolute;
		top: 30rpx;
		left: 0rpx;
		color: white;
		font-size: 28rpx;
		border-radius: 0 20rpx 20rpx 0;
		padding-left: 20rpx;
	}

	.select {
		background-color: #f2f8ff;
		color: #2c8eff;
	}

	.da-bg {
		background: rgba(0, 0, 0, .1);
		border-radius: 10rpx;
		margin-top: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.css {
		color: #19be6b;
	}

	.orr {
		color: #2c8eff;
	}
</style>